<template>
  <!-- 标题 -->
  <van-nav-bar
    :title="isLogin ? '登录' : '注册'"
    left-arrow
    @click-left="router.replace('/home')"
  />
  <div class="container">
    <!-- 头像 -->
    <div class="user_img">
      <img src="https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg" />
    </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 登录注册通用 -->
        <van-field
          v-model="formInfo.name"
          name="name"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="formInfo.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <!-- 仅注册 -->
        <van-field
          v-if="!isLogin"
          v-model="formInfo.avatar"
          type="url"
          name="avatar"
          label="头像"
          placeholder="图片地址"
          disabled
          :rules="[{ required: true, message: '请填写图片地址' }]"
        />
        <van-field name="sex" label="性别" v-if="!isLogin">
          <template #input>
            <van-radio-group v-model="formInfo.sex" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="!isLogin"
          v-model="formInfo.sign"
          type="text"
          name="sign"
          label="签名"
          placeholder="个性签名"
          :rules="[{ required: true, message: '请填写个性签名' }]"
        />
        <van-field
          v-if="!isLogin"
          v-model="formInfo.secretAnswer"
          type="text"
          name="secret_answer"
          label="密保"
          placeholder="验证密保"
          :rules="[{ required: true, message: '请填写密保' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="success" native-type="submit">
          {{ isLogin ? "登录" : "注册" }}
        </van-button>
        <van-button
          round
          block
          class="registerBtn"
          type="primary"
          @click="isLogin = !isLogin"
        >
          {{ isLogin ? "注册" : "返回登录" }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { login,register } from "@/api/user";
import { showNotify } from "vant";
import { setToken } from "@/utils/token.js";
import { useRouter } from "vue-router";
import useUserInfo from "@/stores/useUserInfo";
import useCartInfo from "@/stores/useCartInfo";

let router = useRouter();
let store = useUserInfo();
let storeCart = useCartInfo();
let isLogin = ref(true);
let formInfo = ref({
  name: "",
  password: "",
  avatar: "https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg",
  sex: 1,
  sign: "",
  secretAnswer: "",
});
let onSubmit = async (values) => {
  if (isLogin.value) {
    // 登录
    let res = await login(values);
    // 储存token到cookie
    setToken(res.data.token, res.data.expire_in);
    // 储存个人信息到仓库
    store.setUserInfo({
      name: values.name,
      avatar: res.data.avatar,
      sex: res.data.sex,
      sign: res.data.sign,
    });
    // 首次登录自动获取购物车信息
    storeCart.getCartInfo();
    // 跳转到首页
    router.replace("/home");
  } else {
    console.log(values);
    // 注册
    let res = await register(values);
    showNotify({
      type: "success",
      message: "注册成功",
      duration: 1500,
      onClose: () => {
        isLogin.value = true;
        formInfo.value.password = "";
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  margin-top: 40px;

  .user_img {
    height: 100px;
    padding-top: 58px;
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .registerBtn {
    margin-top: 12px;
  }
}
</style>